<template>
  <div class="achievement" v-cloak>
    <div class="bg_color"></div>
    <div class="about-us" v-show="show">
      <ul class="top" style="background: #fff">
        <li @click="callbackwin"><img src="../assets/image/backBa.png"></li>
        <li @click="tixian">提现</li>
        <li>我的钱包</li>
        <div class="clearfix"></div>
      </ul>
      <mt-loadmore :distanceIndex="4" @top-status-change="handleTopChange" :topDistance="30" :bottomDistance='30' :maxDistance="40" :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="bottomAllLoaded" ref="loadmore" :autoFill="false" :bottomAllLoaded = bottomsta>
        <div slot="top" class="mint-loadmore-top">
          <span v-show="topStatus === 'loading'" class="color_top">Loading...</span>
        </div>
      <div class="content">
        <div class="money">
          <p class="title">余额账户(元)</p>
          <p class="num"><span>¥</span>{{account}}</p>
        </div>
        <div class="purse">
          <ul class="purse-menu">
            <li :class="{active : arra == 1}" @click="checkpurse(1)">
              <span>资金明细<div class="line"></div></span>
            </li>
            <li :class="{active : arra == 2}" @click="checkpurse(2)">
              <span>提现记录<div class="line"></div></span>
            </li>
            <div class="clearfix"></div>
          </ul>

            <div v-if="arra == 1">
              <ul v-if="walletsta">
                <li v-for="(item,index) in detailed_list">
                  <p class="title">{{item.bi_remark}}</p>
                  <p class="time-purse">{{item.bi_add_time}}</p>
                  <span class="change" :class="{add : parseInt(item.bi_price)>0}">{{item.bi_price}}元</span>
                </li>
              </ul>
              <div v-else class="nosta">
                暂无资金明细
              </div>
            </div>
            <div v-else>
              <ul v-if="rawsta">
                <li v-for="(item,index) in list">
                  <p class="title">{{item.wr_title}}</p>
                  <p class="time-purse">{{item.wr_add_time}}<span>{{item.wr_status}}</span></p>
                  <span class="change" :class="{add : parseInt(item.wr_price) > 0}">{{item.wr_price}}元</span>
                </li>
              </ul>
              <div v-else class="nosta">
                暂无提现记录
              </div>
            </div>

        </div>
      </div>
        <div slot="bottom" class="mint-loadmore-bottom">
          <load-more tip="正在加载" v-show="loadingBottomShow"></load-more>
        </div>
      </mt-loadmore>
      <div class="home_img" v-show="forwardsta">
        <div class="receive">
          <h3>提现</h3>
          <div class="recevice_text">
            <input type="tel" placeholder="请输入提现金额" style="background:none;" v-model="price"/>
          </div>
          <div class="recevice_radio">
            <ul>
              <li>
							<span class="cancel_span1">
					            <input type="radio" name="cause" value="微信" v-model="paytype">
					        </span>
                <span class="">微信</span>
              </li>
              <li>
							<span class="cancel_span1">
					            <input type="radio" name="cause" value="支付宝" v-model="paytype">
					        </span>
                <span class="">支付宝</span>
              </li>
            </ul>
          </div>
          <div class="receive_btn">
            <div class="recevice_cancel" @click="forwardpush">
              取消
            </div>
            <div class="recevice_submit" @click="forwardsubmit">
              确定
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { LoadMore, Swiper } from 'vux'
  import { Loadmore } from 'mint-ui'
  import Vue from 'vue'
  //  let $ = require('Jquery')
  Vue.component(Loadmore.name, Loadmore)
  export default {
    components: {
      LoadMore,
      Swiper
    },
    name: 'MyPurse',
    data () {
      return {
        show: false,
        end_id: 0,
        limit: 10,
        account: '',
        arra: 1,
        forend_id: 0,
        detailed_list: [],
        list: [],
        refresh: true,
        walletsta: true,
        rawsta: true,
        forwardsta: false,
        price: '',
        paytype: '微信',
        loadingBottomShow: false,
        topStatus: 'loading',
        bottomsta: false,
        bottomAllLoaded: false,
        messageSta: true
      }
    },
    methods: {
      callbackwin: function () {
        window.history.back(-1)
      },
      loadBottom () {
        this.loadingBottomShow = true
        if (this.arra === 1) {
          if (this.refresh === true) {
            this.purseAjax('')
          } else {
            this.loadingBottomShow = false
            this.$refs.loadmore.onBottomLoaded()
          }
        } else {
          if (this.refresh === true) {
            this.forwards('')
          } else {
            this.loadingBottomShow = false
            this.$refs.loadmore.onBottomLoaded()
          }
        }
      },
      handleTopChange (status) {
        this.topStatus = status
      },
      loadTop () {
        this.bottomsta = false
        this.refresh = true
        if (this.arra === 1) {
          this.end_id = 0
          this.walletsta = true
          this.purseAjax('reflsh')
        } else {
          this.forend_id = 0
          this.rawsta = true
          this.forwards('reflsh')
        }
      },
      checkpurse: function (num) {
        let thisObj = this
        thisObj.arra = num
        thisObj.refresh = true
        thisObj.forend_id = 0
        thisObj.end_id = 0
        thisObj.list = []
        thisObj.detailed_list = []
        thisObj.walletsta = true
        thisObj.rawsta = true
        if (num === 1) {
          thisObj.purseAjax('')
        } else {
          thisObj.forwards('')
        }
      },
      tixian: function () {
        this.forwardsta = true
      },
      forwardsubmit: function () {
        let thisObj = this
        if (!thisObj.price) {
          thisObj.$vux.toast.show({
            text: '请输入提现金额',
            type: 'text',
            width: '180px',
            position: 'bottom'
          })
          return false
        }
        thisObj.$chaos.ajax({
          data: {
            price: thisObj.price,
            account: thisObj.paytype
          },
          slient: true,
          userinfo: true,
          url: 'User/withdraw',
          callback: function (type, res) {
            if (res.status === 'SUCCESS') {
              thisObj.account = (parseInt(thisObj.account) - parseInt(thisObj.price)).toFixed(2)
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
              thisObj.price = ''
              thisObj.forwardsta = false
              thisObj.checkpurse(2)
            } else {
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
              if (res.result.msg === '请先绑定支付宝账号') {
                setTimeout(function () {
                  window.location.href = '#/BindZfb'
                }, 300)
              }
            }
          }
        })
      },
      forwardpush: function () {
        this.forwardsta = false
      },
      timestampToTime: function (timestamp) {
        let date = new Date(timestamp * 1000)
        let Y = date.getFullYear() + '-'
        let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
        let D = date.getDate() + ' '
        let h = date.getHours() + ':'
        let m = date.getMinutes() + ':'
        let s = date.getSeconds()
        return Y + M + D + h + m + s
      },
      forwards: function (title) {
        let thisObj = this
        thisObj.$chaos.ajax({
          data: {
            limit: thisObj.limit,
            end_id: thisObj.forend_id
          },
          slient: true,
          userinfo: true,
          url: 'User/getWithdrawRecord',
          callback: function (type, res) {
            if (res.status === 'SUCCESS') {
              thisObj.account = res.result.account
              if (title === 'reflsh') {
                thisObj.list = []
                thisObj.$refs.loadmore.onTopLoaded()
              }
              thisObj.loadingBottomShow = false
              thisObj.$refs.loadmore.onBottomLoaded()
              if (res.result.list.length === 0) {
                thisObj.refresh = false
                if (thisObj.forend_id === 0) {
                  thisObj.rawsta = false
                }
                return false
              }
              if (res.result.list.length < thisObj.limit) {
                thisObj.refresh = false
              }
              thisObj.list = thisObj.list.concat(res.result.list)
              thisObj.forend_id = res.result.end_id
            } else {
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      },
      purseAjax: function (title) {
        let thisObj = this
        thisObj.$chaos.ajax({
          data: {
            limit: thisObj.limit,
            end_id: thisObj.end_id
          },
          slient: true,
          userinfo: true,
          url: 'User/getWalletData',
          callback: function (type, res) {
            if (res.status === 'SUCCESS') {
              thisObj.show = true
              thisObj.account = res.result.account
              if (title === 'reflsh') {
                thisObj.detailed_list = []
                thisObj.$refs.loadmore.onTopLoaded()
              }
              thisObj.loadingBottomShow = false
              thisObj.$refs.loadmore.onBottomLoaded()
              if (res.result.detailed_list.length === 0) {
                thisObj.refresh = false
                if (thisObj.end_id === 0) {
                  thisObj.walletsta = false
                }
                return false
              }
              if (res.result.detailed_list.length < thisObj.limit) {
                thisObj.refresh = false
              }
              thisObj.detailed_list = thisObj.detailed_list.concat(res.result.detailed_list)
              for (let i = 0; i < thisObj.detailed_list.length; i++) {
                thisObj.detailed_list[i].bi_add_time = thisObj.timestampToTime(thisObj.detailed_list[i].bi_add_time)
              }
              thisObj.end_id = res.result.end_id
            } else {
              thisObj.show = true
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      },
      verify: function () {
        var thisObj = this
        this.$chaos.setTitle('我的钱包')
        this.$store.commit('headerShow', false)
        this.$store.commit('title', '我的钱包')
        this.$store.commit('footerShow', false)
        this.$chaos.verify(function () {
          thisObj.purseAjax('')
        })
      }
    },
    created: function () {
      this.verify()
    },
    mounted: function () {
    },
    destroyed: function () {
      this.$store.commit('headerLeft', {showBack: true, backText: ' '})
    },
    watch: {
      '$route': 'verify'
    }
  }
</script>
<style scoped>
  [v-cloak] {
    display: block;
  }
  .mint-loadmore-top{
    text-align: center;
    line-height: 33px;
  }
  .home_img {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 444;
    background: rgba(0, 0, 0, 0.4);
  }
  .active .line{
    height: 1px;
    background: red;
    margin-top: 2px;
  }
  .receive {
    width: 50%;
    left: 50%;
    margin-left: -25%;
    top: 27%;
    position: absolute;
    z-index: 444;
    background: #fff;
    border-radius: 5px;
  }
  .receive h3 {
    text-align: center;
    line-height: 30px;
    margin-top: 8px;
    font-weight: normal;
    font-size: 16px;
    color: #ffa028;
  }
  .recevice_text {
    padding: 10px 15px;
    background: #f9f9f9;
    border-radius: 5px 5px;
    margin: 10px 20px;
    border: 1px solid #ffa028;
  }
  input, button, textarea {
    border: 0;
    margin: 0;
    padding: 0;
    outline: none;
    resize: none;
  }
  .recevice_radio {
    margin: 0px 20px;
    overflow: hidden;
  }
  ol, ul {
    list-style: none;
  }
  .recevice_radio li:first-child {
    float: left;
  }
  .recevice_radio li:last-child {
    float: right;
  }
  .cancel_span1 {
    margin: 3px 6px 0px 0px!important;
  }
  .cancel_span1 {
    display: block;
    float: left;
    width: 17px;
    height: 17px;
    margin: 2px 15px;
  }
  .receive_btn {
    margin: 15px;
    overflow: hidden;
  }
  .recevice_cancel {
    float: left;
    width: 34%;
    text-align: center;
    border: 1px solid rgb(255, 160, 40);
    color: rgb(255, 160, 40);
    border-radius: 5px;
    line-height: 24px;
  }
  .recevice_submit {
    float: right;
    width: 34%;
    text-align: center;
    background: rgb(255, 160, 40);
    color: #fff;
    border-radius: 5px;
    line-height: 24px;
  }
  .content .money {
    background-image: url(../assets/image/yy_bg.png);
    height:170px;
    position: relative;
    background-size: 100% 100%;
  }
  .content .money .title {
    position: absolute;
    color: #eee;
    top: 20px;
    left: 5%;
  }
  .content .money .num {
    text-align: center;
    color: #fff;
    font-size: 33px;
    position: absolute;
    width: 100%;
    bottom: 33px;
  }
  .content .money .num span {
    font-size: 18px;
    margin-right: 3px;
  }
  .content .purse {
    background: #fff;
  }
  .content .purse>ul li {
    position: relative;
    padding: 10px 15px;
    border-bottom: 1px solid rgb(252, 252, 252);
  }
  .purse-menu li {
    float: left;
  }
  .purse-menu li span {
    display: block;
    position: relative;
  }
  .clearfix {
    clear: both;
  }
  .content .purse ul li {
    position: relative;
    padding: 10px 3%;
    border-bottom: 1px solid rgb(252, 252, 252);
  }
  .content .purse ul li .title {
    font-size: 14px;
  }
  .content .purse ul li p {
    height: 25px;
    line-height: 25px;
  }
  .content .purse ul li .time-purse {
    color: #aaa;
    font-size: 14px;
  }
  .content .purse ul li p {
    height: 25px;
    line-height: 25px;
  }
  .content .purse ul li .change {
    position: absolute;
    font-size: 16px;
    height: 20px;
    line-height: 20px;
    right: 3%;
    top: 25px;
  }
  .change {
    margin-top: 6px;
  }
  .nosta {
    text-align: center;
    line-height: 22px;
    margin-top: 15px;
    padding-bottom: 15px;
    color: #cacaca;
  }
  .top {
    line-height: 47px;
    height: 47px;
    padding: 0px 20px;
  }
  .top li:nth-child(1) {
    float: left;
    width: 11px;
    height: 50px;
  }
  .top li:nth-child(1) img {
    height: 18px;
    margin-top: 15px;
  }
  .top li:nth-child(2) {
    float: right;
    width: 60px;
    text-align: right;
  }
  .top li:nth-child(3) {
    text-align: center;
    margin: 0px 60px;
    font-size:16px;

  }
  .clearfix {
    clear: both;
  }
  .cancel_span1 input[type="radio"],.cancel_span2 input[type="checkbox"]{
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    width: 17px;
    height: 17px;
    background: #fff;
    border-radius: 50%;
    border: 1px solid #aeaeae;
  }
  .cancel_span1 input[type="radio"]:checked{
    background: url("../assets/image/btn_xz_s.png");
    background-size: 100% 100%;
    width:17px;
    height:17px;
    border:0px;
  }
</style>
